
<template>
    <div class="content">
        <!-- icon图标 -->
        <div class="icon" style="margin-left:-10px;">
            <i class="iconfont icon-qingjiashenqing-daiban-03"></i>
        </div>
        今日待办
        <div class="icon" style="float:right;">
            <i class="iconfont icon-24gf-ellipsisVertical" ></i>
        </div>
    </div>
    <div class="daiban">
        <div class="a" v-for="item in list.num" :key="list.id" @click="Area(list.url)">
            <div class="hang">
                <div style="padding-left: 10px;"><c>{{ item.name }}</c></div>
                <div style="float:right;margin-right: 10px; "><c>{{ item.num }}</c></div>
            </div>
        </div>
        <!-- <ul style="list-style-type: none;"> -->
            <!-- <li v-for="item in list.num" :key="list.id" @click="Area(list.url)"> -->
                <!-- <span>{{ item.name }}</span> -->
                <!-- <span>{{ item.num }}</span> -->
            <!-- </li> -->
        <!-- </ul> -->
    </div>
</template>

<script>
import { reactive } from 'vue';
import getApi from '@/api/getApi';

export default {
    setup () {
        
        const list = reactive({
         num:[ {
                    id:0,
                    name:"房屋审核",
                    num:0
                },
                {
                    id: 1,
                    name:"住户认证审核",
                    num: 11
                },
                {
                    id: 2,
                    name:"注册用户实名审核",
                    num: 3
                },
                {
                    id :3,
                    name : "待分配工单",
                    num: 5
                },
                {
                    id:4,
                    name: "分配待处理工单" ,
                    num: 10
                },
                {
                    id:5,
                    name:"超时待处理工单",
                    num:2
                }
            
            ] })
        const Area = (url) =>{
            // console.log(url)
        }

        return { 
            list,Area
        }
    }   
}

</script>

<style lang="less" scoped>
    .content{
        
        font-size: 20px;
        margin-left: 20px;

        .icon{
            display:inline-block ;
            width: 40px;
            height: 40px;
            color: rgb(127, 124, 124);
            font-size: 30px;
            i{
                font-size: 23px;
            }
            
        }
    }
    .daiban {
        background-color: #fff;
        margin-left: 10px;
        margin-right: 10xp;

        .hang {
            // display: inline-block;
            // margin-top: 10px;
            width: 90%;
            height: 35px;
            background-color: rgb(230, 244, 254);
            margin-top: 15px;
            display: flex;
            align-items: center;
            padding-left: 4px;
            justify-content: space-between;

                .c {
                    font-size: 13px;
                    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                    font-weight: 300;
                    font-style: normal;
                   margin-top: 20px;
                   margin-left: 20px;
                }
            }
        }

    .a{
        color: rgb(175, 177, 177);
    }
    .a:last-child{
        color: #edab8b !important;
    }
</style>